<template>
   <div>
        <el-dialog title="创建用户" :visible.sync="dialogVisible" width="40%"
          :before-close="handleClose">
          <el-form  label-width="170px" :rules="rules" :model="formData" ref="formData" class="demo-ruleForm">
            <el-form-item label="权限组名称">
              <template>
                <el-radio-group v-model="point" @change="Radio">
                  <el-radio  label="1" >菜单</el-radio>
                  <el-radio  label="2" >权限点</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item label="权限组名称">
              <el-select v-if="this.point==1" v-model="formData.pid" style="width:60%" placeholder="主导航" >
                  <el-option 
                    v-for="item in hireType" 
                    :key="item.id" 
                    :label="item.title" 
                    :value="item.id"
                  />
                </el-select>
                <el-select v-else v-model="formData.pid" style="width:60%" placeholder="主导航" >
                  <el-option 
                    v-for="item in hireType" 
                    :key="item.id" 
                    :label="item.title" 
                    :value="item.id"
                    :disabled="item.pid==null"
                  />
                </el-select>
                
            </el-form-item>
            <el-form-item label="权限代码" prop="code"> 
              <el-input v-model="formData.code" style="width:70%"></el-input>
            </el-form-item>
            <el-form-item label="权限标题" prop="title">
              <el-input v-model="formData.title" style="width:70%"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false;point='1';formData={is_point:false,pid:'0',code:'',title:''};hireType=[{id:'0',code:'',title:'主导航'}]">取 消</el-button>
            <el-button type="primary" @click="submitForm('formData')">确 定</el-button>
          </span>
        </el-dialog>
   </div>
</template>

<script>
import {getmenus} from '@/api/permissions'
import {addmenus} from '@/api/menu'
// import {postappuser} from '@/api/users'
export default {
name: 'addMenus',
components: {},
props: {},
data() {
  return {
    hireType:[{id:0,code:'',title:'主导航'}],
    point:'1',
    dialogVisible: false,
    formData: {
        is_point:false,
        pid:0,
        code:'',
        title:'',
    },
    defaultProps: {
      children: 'childs',
      label: 'title'
    },
    rules: {
        code: [
          { required: true, message: '权限不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ]
      },
  };
},
methods: {
  handleClose(done) {
    this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
  },
  async getmenus(){
      console.log(321);
      const res=await getmenus()
      res.forEach(value => {
          this.hireType.push(value)
          this.setid(value)
      });
      console.log(222);
      console.log(this.hireType);
  },
//   postappuser(){
//       const res=postappuser(this.formData)
//       console.log(res);
//   },
 async submitForm(formName) {
     this.$refs[formName].validate((valid) => {
      if (valid) {

      } else {
        console.log('error submit!!');
        return false;
      }
      
    });
    if(this.point==1){
        this.formData.id=""
    }
    const data = JSON.parse(JSON.stringify(this.formData))
    await this.addmenus(data)
    this.formData={is_point:false,pid:'',code:'',title:''}
    this.hireType=[]
              // 3. 成功提示，失败处理
    this.$message.success('添加成功')
        // 4. 列表更新(子父通信)
    this.$emit('update-list')
        // 5. 表单重置、关闭
    this.dialogVisible = false
  },
  async addmenus(res){
      await addmenus(res)
  },
  setid(res){
      if(res.childs){
          res.childs.forEach(value => {
              this.hireType.push(value)
              this.setid(value)
          });
      }
  },
  async Radio(e){
      console.log(e);
      if(e==1){
          console.log(1);
          this.formData.is_point=false
      }else{
          console.log(2);
          this.formData.is_point=true
      }
  },

  checkHandler(){

  }
},
computed: {},
watch: {},
created () {
    
},
mounted () {},
}
</script>
<style lang='less' scoped>

</style>